<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import { avators } from "../index";

const emits = defineEmits(["checkFold"]);
const props = withDefaults(
  defineProps<{
    selectId: number | string;
  }>(),
  {
    selectId: 0,
  }
);

const checkId = computed(() => {
  return avators.find((item: any) => item.idAvator == props.selectId)?.idAvator;
});

// 判断工程师是否处于活动状态
const isActive = (id: string) => {
  return id === checkId.value;
};

const isFold = ref(true);
// methods
const changeFold = () => {
  isFold.value = !isFold.value;
  emits("checkFold", isFold.value);
};
</script>
<template>
  <div class="card-container">
    <div class="card-top flex items-center relative">
      <img src="../../../assets/images/jiagou.png" alt="" width="15" height="15" style="margin-right: 4px" /><span
        class="ml-4px" style="font-size: 15px">数据分析团队</span>
      <span class="w-16px h-16px bg-#4270e2 border-rd-50% text-#fff text-center line-height-16px ml-8px">3</span>
      <div class="absolute right-16px cursor-pointer" @click="changeFold">
        <img src="../../../assets/images/more.png" alt="" width="14" />
      </div>
    </div>
    <div class="card-body w-100% h-100px bg-#f5f6f6 flex items-center pt-8px pb-8px"
      v-if="avators && avators.length > 0 && isFold">
      <div v-for="(item, ins) in avators" class="h-100px flex items-center m-8px bg-#f0f0f0 pl-24px pr-24px">
        <img src="../../../assets/images/1111.png" alt="" width="52" height="52" v-if="ins == 0" class="transparent-bg"
          :class="{
            'inactive-engineer': !isActive(item.idAvator),
            'active-engineer': isActive(item.idAvator),
          }" />
        <img src="../../../assets/images/1212.png" alt="" width="52" height="52" v-if="ins == 1" class="transparent-bg"
          :class="{
            'inactive-engineer': !isActive(item.idAvator),
            'active-engineer': isActive(item.idAvator),
          }" />
        <img src="../../../assets/images/1313.png" alt="" width="52" height="52" v-if="ins == 2" class="transparent-bg"
          :class="{
            'inactive-engineer': !isActive(item.idAvator),
            'active-engineer': isActive(item.idAvator),
          }" />
        <div class="flex ml-8px text-center" style="flex-direction: column; font-size: 12px"
          :class="{ 'inactive-text': !isActive(item.idAvator) }">
          <span>{{ item.name }}</span><span>{{ item.engFlag }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.card-container {
  width: 100%;

  .card-top {
    font-size: 12px;
    padding: 8px;
    box-sizing: border-box;
    background: #f0f0f0;
  }
}

.transparent-bg {
  background-color: transparent !important;
  object-fit: contain;
}

/* 活动工程师样式 - 使用 drop-shadow 代替 box-shadow */
.active-engineer {
  filter: drop-shadow(0 0 5px rgba(0, 88, 255, 0.5));
  transition: all 0.3s ease;
}

/* 非活动工程师样式 */
.inactive-engineer {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.inactive-text {
  color: #888;
  transition: all 0.3s ease;
}
</style>
